<ion-slides #weekSlider [loop]="true" [dir]="dir" (ionSlideDidChange)="onSlideChanged()">
    <ion-slide>
        <table class="table table-bordered table-fixed weekview-header">
            <thead>
            <tr>
                <th class="calendar-hour-column"></th>
                <th class="weekview-header text-center" *ngFor="let dayHeader of views[0].dayHeaders">{{dayHeader}}
                </th>
            </tr>
            </thead>
        </table>
        <div *ngIf="0===currentViewIndex">
            <div class="weekview-allday-table">
                <div class="weekview-allday-label">{{allDayLabel}}</div>
                <ion-scroll scrollY="true" class="weekview-allday-content-wrapper" zoom="false">
                    <table class="table table-fixed weekview-allday-content-table">
                        <tbody>
                        <tr>
                            <td *ngFor="let day of views[0].dates" class="calendar-cell">
                                <div [ngClass]="{'calendar-event-wrap': day.events}" *ngIf="day.events"
                                     [ngStyle]="{height: 25*day.events.length+'px'}">
                                    <div *ngFor="let displayEvent of day.events" class="calendar-event" tappable
                                         (click)="eventSelected(displayEvent.event)"
                                         [ngStyle]="{top: 25*displayEvent.position+'px', width: 100*(displayEvent.endIndex-displayEvent.startIndex)+'%', height: '25px'}">
                                        <ng-template [ngTemplateOutlet]="weekviewAllDayEventTemplate"
                                                     [ngOutletContext]="{displayEvent:displayEvent}">
                                        </ng-template>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </ion-scroll>
            </div>
            <init-position-scroll class="weekview-normal-event-container" [initPosition]="initScrollPosition"
                                  [emitEvent]="preserveScrollPosition" (onScroll)="setScrollPosition($event)">
                <table class="table table-bordered table-fixed weekview-normal-event-table">
                    <tbody>
                    <tr *ngFor="let row of views[0].rows; let i = index">
                        <td class="calendar-hour-column text-center">
                            {{hourColumnLabels[i]}}
                        </td>
                        <td *ngFor="let tm of row" class="calendar-cell" tappable (click)="select(tm.time, tm.events)">
                            <div [ngClass]="{'calendar-event-wrap': tm.events}" *ngIf="tm.events">
                                <div *ngFor="let displayEvent of tm.events" class="calendar-event" tappable
                                     (click)="eventSelected(displayEvent.event)"
                                     [ngStyle]="{top: (37*displayEvent.startOffset/hourParts)+'px',left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}">
                                    <ng-template [ngTemplateOutlet]="weekviewNormalEventTemplate"
                                                 [ngOutletContext]="{displayEvent:displayEvent}">
                                    </ng-template>
                                </div>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </init-position-scroll>
        </div>
        <div *ngIf="0!==currentViewIndex">
            <div class="weekview-allday-table">
                <div class="weekview-allday-label">{{allDayLabel}}</div>
                <ion-scroll scrollY="true" class="weekview-allday-content-wrapper" zoom="false">
                    <table class="table table-fixed weekview-allday-content-table">
                        <tbody>
                        <tr>
                            <td *ngFor="let day of views[0].dates" class="calendar-cell">
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </ion-scroll>
            </div>
            <init-position-scroll class="weekview-normal-event-container" [initPosition]="initScrollPosition">
                <table class="table table-bordered table-fixed weekview-normal-event-table">
                    <tbody>
                    <tr *ngFor="let row of views[0].rows; let i = index">
                        <td class="calendar-hour-column text-center">
                            {{hourColumnLabels[i]}}
                        </td>
                        <td *ngFor="let tm of row" class="calendar-cell">
                        </td>
                    </tr>
                    </tbody>
                </table>
            </init-position-scroll>
        </div>
    </ion-slide>
    <ion-slide>
        <table class="table table-bordered table-fixed weekview-header">
            <thead>
            <tr>
                <th class="calendar-hour-column"></th>
                <th class="weekview-header text-center" *ngFor="let dayHeader of views[1].dayHeaders">{{dayHeader}}
                </th>
            </tr>
            </thead>
        </table>
        <div *ngIf="1===currentViewIndex">
            <div class="weekview-allday-table">
                <div class="weekview-allday-label">{{allDayLabel}}</div>
                <ion-scroll scrollY="true" class="weekview-allday-content-wrapper" zoom="false">
                    <table class="table table-fixed weekview-allday-content-table">
                        <tbody>
                        <tr>
                            <td *ngFor="let day of views[1].dates" class="calendar-cell">
                                <div [ngClass]="{'calendar-event-wrap': day.events}" *ngIf="day.events"
                                     [ngStyle]="{height: 25*day.events.length+'px'}">
                                    <div *ngFor="let displayEvent of day.events" class="calendar-event" tappable
                                         (click)="eventSelected(displayEvent.event)"
                                         [ngStyle]="{top: 25*displayEvent.position+'px', width: 100*(displayEvent.endIndex-displayEvent.startIndex)+'%', height: '25px'}">
                                        <ng-template [ngTemplateOutlet]="weekviewAllDayEventTemplate"
                                                     [ngOutletContext]="{displayEvent:displayEvent}">
                                        </ng-template>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </ion-scroll>
            </div>
            <init-position-scroll class="weekview-normal-event-container" [initPosition]="initScrollPosition"
                                  [emitEvent]="preserveScrollPosition" (onScroll)="setScrollPosition($event)">
                <table class="table table-bordered table-fixed weekview-normal-event-table">
                    <tbody>
                    <tr *ngFor="let row of views[1].rows; let i = index">
                        <td class="calendar-hour-column text-center">
                            {{hourColumnLabels[i]}}
                        </td>
                        <td *ngFor="let tm of row" class="calendar-cell" tappable (click)="select(tm.time, tm.events)">
                            <div [ngClass]="{'calendar-event-wrap': tm.events}" *ngIf="tm.events">
                                <div *ngFor="let displayEvent of tm.events" class="calendar-event" tappable
                                     (click)="eventSelected(displayEvent.event)"
                                     [ngStyle]="{top: (37*displayEvent.startOffset/hourParts)+'px',left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}">
                                    <ng-template [ngTemplateOutlet]="weekviewNormalEventTemplate"
                                                 [ngOutletContext]="{displayEvent:displayEvent}">
                                    </ng-template>
                                </div>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </init-position-scroll>
        </div>
        <div *ngIf="1!==currentViewIndex">
            <div class="weekview-allday-table">
                <div class="weekview-allday-label">{{allDayLabel}}</div>
                <ion-scroll scrollY="true" class="weekview-allday-content-wrapper" zoom="false">
                    <table class="table table-fixed weekview-allday-content-table">
                        <tbody>
                        <tr>
                            <td *ngFor="let day of views[1].dates" class="calendar-cell">
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </ion-scroll>
            </div>
            <init-position-scroll class="weekview-normal-event-container" [initPosition]="initScrollPosition">
                <table class="table table-bordered table-fixed weekview-normal-event-table">
                    <tbody>
                    <tr *ngFor="let row of views[1].rows; let i = index">
                        <td class="calendar-hour-column text-center">
                            {{hourColumnLabels[i]}}
                        </td>
                        <td *ngFor="let tm of row" class="calendar-cell">
                        </td>
                    </tr>
                    </tbody>
                </table>
            </init-position-scroll>
        </div>
    </ion-slide>
    <ion-slide>
        <table class="table table-bordered table-fixed weekview-header">
            <thead>
            <tr>
                <th class="calendar-hour-column"></th>
                <th class="weekview-header text-center" *ngFor="let dayHeader of views[2].dayHeaders">{{dayHeader}}
                </th>
            </tr>
            </thead>
        </table>
        <div *ngIf="2===currentViewIndex">
            <div class="weekview-allday-table">
                <div class="weekview-allday-label">{{allDayLabel}}</div>
                <ion-scroll scrollY="true" class="weekview-allday-content-wrapper" zoom="false">
                    <table class="table table-fixed weekview-allday-content-table">
                        <tbody>
                        <tr>
                            <td *ngFor="let day of views[2].dates" class="calendar-cell">
                                <div [ngClass]="{'calendar-event-wrap': day.events}" *ngIf="day.events"
                                     [ngStyle]="{height: 25*day.events.length+'px'}">
                                    <div *ngFor="let displayEvent of day.events" class="calendar-event" tappable
                                         (click)="eventSelected(displayEvent.event)"
                                         [ngStyle]="{top: 25*displayEvent.position+'px', width: 100*(displayEvent.endIndex-displayEvent.startIndex)+'%', height: '25px'}">
                                        <ng-template [ngTemplateOutlet]="weekviewAllDayEventTemplate"
                                                     [ngOutletContext]="{displayEvent:displayEvent}">
                                        </ng-template>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </ion-scroll>
            </div>
            <init-position-scroll class="weekview-normal-event-container" [initPosition]="initScrollPosition"
                                  [emitEvent]="preserveScrollPosition" (onScroll)="setScrollPosition($event)">
                <table class="table table-bordered table-fixed weekview-normal-event-table">
                    <tbody>
                    <tr *ngFor="let row of views[2].rows; let i = index">
                        <td class="calendar-hour-column text-center">
                            {{hourColumnLabels[i]}}
                        </td>
                        <td *ngFor="let tm of row" class="calendar-cell" tappable (click)="select(tm.time, tm.events)">
                            <div [ngClass]="{'calendar-event-wrap': tm.events}" *ngIf="tm.events">
                                <div *ngFor="let displayEvent of tm.events" class="calendar-event" tappable
                                     (click)="eventSelected(displayEvent.event)"
                                     [ngStyle]="{top: (37*displayEvent.startOffset/hourParts)+'px',left: 100/displayEvent.overlapNumber*displayEvent.position+'%', width: 100/displayEvent.overlapNumber+'%', height: 37*(displayEvent.endIndex -displayEvent.startIndex - (displayEvent.endOffset + displayEvent.startOffset)/hourParts)+'px'}">
                                    <ng-template [ngTemplateOutlet]="weekviewNormalEventTemplate"
                                                 [ngOutletContext]="{displayEvent:displayEvent}">
                                    </ng-template>
                                </div>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </init-position-scroll>
        </div>
        <div *ngIf="2!==currentViewIndex">
            <div class="weekview-allday-table">
                <div class="weekview-allday-label">{{allDayLabel}}</div>
                <ion-scroll scrollY="true" class="weekview-allday-content-wrapper" zoom="false">
                    <table class="table table-fixed weekview-allday-content-table">
                        <tbody>
                        <tr>
                            <td *ngFor="let day of views[2].dates" class="calendar-cell">
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </ion-scroll>
            </div>
            <init-position-scroll class="weekview-normal-event-container" [initPosition]="initScrollPosition">
                <table class="table table-bordered table-fixed weekview-normal-event-table">
                    <tbody>
                    <tr *ngFor="let row of views[2].rows; let i = index">
                        <td class="calendar-hour-column text-center">
                            {{hourColumnLabels[i]}}
                        </td>
                        <td *ngFor="let tm of row" class="calendar-cell">
                        </td>
                    </tr>
                    </tbody>
                </table>
            </init-position-scroll>
        </div>
    </ion-slide>
</ion-slides>
